<template>
	<view class="container">
		<cu-custom  :isBack="true">
			<block slot="backText"><text style="color:#fff">返回</text></block>
			<block slot="content">
				<text style="color:#fff">数据统计</text>
			</block>
		</cu-custom>
		
		<view class="page-form">
            <span class="page_form_title">呼叫数据 (今日)</span>
            <view class="page_form_left">
                <span>546</span><span>呼叫总数</span>
            </view>
            <view class="page_form_right">
                <view><span style="color:aqua">213</span><span>接通</span></view>
                <view><span style="color:#ff0000">13</span><span>未接通</span></view>
                <view><span style="color:orange">3</span><span>呼损</span></view>
            </view>
		</view>
        
        <view class="page-echarts">
        	<u-tabs :list="tabList" :is-scroll="false" :current="tabCurrent" @change="changeTab"></u-tabs>
            <view @click="echarts.onClick" :prop="optionCall" :change:prop="echarts.updateEcharts" id="echarts" class="echarts"></view>
        </view>
		
		<view class="page-form-order">
		    <span class="page_form_title">订单数据 (今日)</span>
		    <view class="page_form_left" style="border-right:#00aa00 1px solid;">
		        <span>546</span><span>订单总数</span>
		    </view>
		    <view class="page_form_right">
		        <view><span style="color:aqua">213</span><span>已审核</span></view>
		        <view><span style="color:#ff0000">13</span><span>未通过</span></view>
		        <view><span style="color:orange">3</span><span>未审核</span></view>
		    </view>
		</view>
		
		<!-- <view class="page-echarts">
			<u-tabs :list="tabList" :is-scroll="false" :current="tabCurrent" @change="changeTab"></u-tabs>
            <canvas canvas-id="echarts_call_report" id="echarts_call_report" class="charts" @touchend="tapCall"/>
		</view> -->
		
		<u-toast ref="uToast" />
	</view>
</template>
<script>	
	import {
		mapState,
		mapGetters
	} from "vuex";
    
    // import * as echarts from "echarts";

	export default {
		data() {
			return {
				formData: {
					call_type:0
				},
				
				currentData:{},

				rules: {},
                
                recordList:"",
				helpData:"",
				helpTitle:"",
				
				tabList:[{
					name: '昨日'
				}, {
					name: '近一周'
				}],
				tabCurrent:0,


                optionCall: {
					title: {
						text: '呼叫统计',
                        show:false
					},
					tooltip: {
                        show:true,
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        textStyle:{
                            fontSize:13
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        top: '15%',
                        containLabel: true
                    },
					legend: {
						data: ['总数','接通','未接通','呼损'],
                        itemWidth: 15,    // 设置图例标记的大小
                        itemHeight: 8,
                        textStyle:{
                            fontSize:13
                        }
					},
					xAxis: {
						data: ["07", "08", "09", "09", "10", "11","12"],
                        type:'category'
					},
					yAxis: {},
					series: [
                        {
                            name: '总数',
                            type: 'bar',
                            barWidth: 5,
                            data: [5, 20, 36, 10, 10, 20,32]
                        },
                        {
                            name: '接通',
                            type: 'bar',
                            barWidth: 5,
                            data: [5, 10, 26, 13, 16, 30,23]
                        },
                        {
                            name: '未接通',
                            type: 'bar',
                            barWidth: 5,
                            data: [15, 20, 31, 20, 30, 10,21]
                        },
                        {
                            name: '呼损',
                            type: 'bar',
                            barWidth: 5,
                            data: [5, 30, 16, 19, 10, 30,12]
                        }
                    ]
				}
			}
		},
		computed: {
			...mapGetters(["userInfo","callType"]),
			...mapState({
				callType: state => state.app.callType
			} )
		},
		onLoad(option) {
			console.log("setting onLoad");
            
		},
		methods: {
			changeTab(val){
				console.log("changetab val",val);
                
                this.tabCurrent = val;
            },
            
			//获取手机操作说明
			initData(){
				//获取手机系统信息
				let sys_info = uni.getSystemInfoSync();
				
				console.log("sys_info");
				console.log(sys_info);
				
			},
            
            changeOption() {
            	const data = this.optionCall.series[0].data
            	// 随机更新示例数据
            	data.forEach((item, index) => {
            		data.splice(index, 1, Math.random() * 40)
            	})
            },
            onViewClick(options) {
            	console.log(options)
            }
            
		},

		onReady() {
			//this.$refs.uForm.setRules(this.rules);
			console.log("setting onready");
			
			this.initData();
		}
	}
</script>

<script module="echarts" lang="renderjs">
	let myChart;
	export default {
		mounted() {
			if (typeof window.echarts === 'function') {
                this.$nextTick(()=>{
                    this.initEcharts()
                })
			} else {
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script')
				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
				script.src = 'static/echarts.js'
				script.onload = this.initEcharts.bind(this)
				document.head.appendChild(script)
			}
		},
		methods: {
			initEcharts() {
				myChart = echarts.init(document.getElementById('echarts'))
				// 观测更新的数据在 view 层可以直接访问到
				myChart.setOption(this.optionCall)
			},
			updateEcharts(newValue, oldValue, ownerInstance, instance) {
				// 监听 service 层数据变更
                if(myChart != null){
                    myChart.setOption(newValue)
                }
			},
			onClick(event, ownerInstance) {
				// 调用 service 层的方法
				ownerInstance.callMethod('onViewClick', {
					test: 'test'
				})
			}
		}
	}
</script>

<style scoped>
.container {
	width: 100%;
	color: #333333;
    height:80vh;
    position: absolute;
    top:0rpx;
	background-image: linear-gradient(to bottom, #4989ff, #ffffff);
	background-size: 100% 75%;
	background-repeat: no-repeat;
	background-position: top center;
	overflow-y: scroll;
}

.echarts{
    width: 100%;
    height: 160px;
    background-color: #fff;
}

.page-form{
    width:96%;
    float:left;
    clear:both;
    margin-left:2%;
    height:15vh;
    padding:40rpx 30rpx;
    margin-top:40rpx;
    
    background-image:url("/static/report_bg.png");
    background-repeat: no-repeat;
    background-size: 101% 100%;
    
    box-shadow: 5px 5px 10px 10px rgba(135, 167, 255, 0.5);
    
    /* background: linear-gradient(90deg, #388dce 0%,#2a87d36e 50%, #2a87d36e 100%); */
}

.page-form-order{
    width:96%;
    float:left;
    clear:both;
    margin-left:2%;
    height:15vh;
    padding:40rpx 30rpx;
    margin-top:30rpx;
	
	border-radius: 20px;
    
    background-image:url("/static/order_report_bg.png");
    background-repeat: no-repeat;
    background-size: 101% 100%;
    
    box-shadow: 5px 5px 10px 10px rgba(135, 167, 255, 0.5);
    
    /* background: linear-gradient(90deg, #388dce 0%,#2a87d36e 50%, #2a87d36e 100%); */
}

.page_form_title{
    display: block;
    width:100%;
    border-left:#fff 3px solid;
    padding-left:20rpx;
	margin-bottom:30rpx;
    line-height:40rpx;
    font-size:32rpx;
    color:#fff;
}

.page_form_left{
    float:left;
    width:30%;
	
	border-right:#58a3ff 1px solid;
}

.page_form_left span{
    display: block;
    width:100%;
    text-align: center;
}

.page_form_left span:last-child{
    font-size:14px;
    color: #d0e5ff;
    line-height:35px;
}

.page_form_left span:first-child{
    font-size:23px;
    font-weight: bold;
    color: #3fd64b;
}

.page_form_right{
    float:right;
    width:68%;
    
}

.page_form_right view{
	width:33%;
	float:left;
}

.page_form_right span{
    display: block;
    width:100%;
    text-align: center;
}

.page_form_right view span:last-child{
    font-size:14px;
    color: #d0e5ff;
    line-height:35px;
}

.page_form_right view span:first-child{
    font-size:20px;
    font-weight: bold;
    color: #3fd64b;
}

.page-echarts{
	width:96%;
	float:left;
	clear:both;
	margin-top:-10rpx;
    margin-left:2%;
    border-radius: 20px;
    overflow:hidden;
}
</style>